import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Platform,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    StatusBar,
    Linking,
    ActivityIndicator,
    DeviceEventEmitter,
    TextInput,
} from 'react-native';

import AndroidModule from 'src/utils/AndroidConnent'
import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import Constant from '../../utils/Constant'//全局变量
import Header from "../../components/header";
import Loading from "../../utils/Loading";
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
import CredentialImage from './CredentialImage'
import OtherImage from './OtherImage'
import EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';

let navigation
const screenW = Dimensions.get('window').width;
const isIos = Platform.OS == 'ios';
/**
 * 附件图片
 */
export default class AttachmentImagePage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            credentialPics:{},
            otherPics:[],
            carId: this.props.route.params.carId,
            fileList:JSON.parse(this.props.route.params.fileList),//上次的选择图片
            isLoadData:false
        }
    }

    credentialPicsRef = React.createRef();
    otherPicsRef = React.createRef();


    componentWillMount() {
        
    }

    componentWillUnmount() {

    }

    componentDidMount() {
        console.log('carId',this.state.carId)
        this.getCarDetails()
    }

    render() {
        navigation = this.props.navigation
        return (
            <View style={styles.container}>

                <Header navigation={navigation} Title={'合同附件'}/>
                
                {this.state.isLoadData ? this.renderScrollTab() : null}

                <TouchableOpacity
                    style={styles.confrimBtn}
                    onPress={() => {
                        this.confirmSubmit()
                    }}>
                    <Text style={styles.btnText}>确认已选附件</Text>
                </TouchableOpacity>
                
            </View>
        );
    }

    renderScrollTab() {
        return (
            <View
                ref={'_scrolltab'}
                style={styles.scrollTab}
            >
                <ScrollableTabView

                    style={{ height: '100%' }}
                    renderTabBar={() => <ScrollableTabBar style={{ borderWidth: 0 }} />}
                    tabBarUnderlineStyle={{ backgroundColor: '#FFE001', marginLeft: 20, marginRight: 20, height: 3, width: 50, borderRadius: 6, marginLeft: 28 }}
                    tabBarBackgroundColor='#FFFFFF'
                    tabBarActiveTextColor='#333333'
                    tabBarInactiveTextColor='#999999'
                    tabBarTextStyle={{ fontSize: 16, borderWidth: 0 }}

                >
                    <CredentialImage ref={this.credentialPicsRef} key={'1'} tabLabel={'证件照片'} picsData={this.state.credentialPics} fileList={this.state.fileList}></CredentialImage>

                    <OtherImage ref={this.otherPicsRef} key={'2'} tabLabel={'其他照片'} picsData={this.state.otherPics}  fileList={this.state.fileList}></OtherImage>
                   

                </ScrollableTabView>
            </View>
        )
    }

    confirmSubmit(){
        
        let credentialPics = this.credentialPicsRef.current.getResult()
        console.log('credentialPics',credentialPics)
        

        if(this.otherPicsRef && this.otherPicsRef.current){
            let otherPicsObj = this.otherPicsRef.current.getResult()
            if(otherPicsObj.value.length > 0){
                credentialPics.push(otherPicsObj)
            }
        }else{
            //页面未加载，直接取值
            this.state.fileList.map((item,index) => {
                if(item.title.indexOf('其他图片') != -1){
                    credentialPics.push(item)
                }
            })
        } 

        let obj = {
            eventName:'selectAttachmentResultListener',
            resultList: JSON.stringify(credentialPics) 
        }
        DeviceEventEmitter.emit('commonEvent', obj);
        navigation.goBack()
        
    }


    getCarDetails() {
        let param = {
            carId: this.state.carId
        }

        HttpUtils.getRequest(HttpUrls.getOwnCarDetails, param)
            .then((result) => {
                let carPics = result.data.carPics
                let picDatas = {}
                let drivingLicensePics = []
                let idPics = []
                let carRegisterPics = []
                let otherCertPics = []
                let otherPics = []
                carPics.map((item,index) => {
                    if(item.description == 'CAR_LICENSE_FRONT' || item.description == 'CAR_LICENSE_BACK'){
                        drivingLicensePics.push(item.picUrl)
                    }else if(item.description == 'ID_FRONT' || item.description == 'ID_BACK'){
                        idPics.push(item.picUrl)
                    }else if(item.description == 'CAR_REG_BOOK'){
                        carRegisterPics.push(item.picUrl)
                    }else if(item.description == 'OTHER_CERT'){
                        otherCertPics.push(item.picUrl)
                    }else if(item.title == 'OTHER_PIC'){
                        otherPics.push(item.picUrl)
                    }
                })

                picDatas.drivingLicensePics = drivingLicensePics
                picDatas.idPics = idPics
                picDatas.carRegisterPics = carRegisterPics
                picDatas.otherCertPics = otherCertPics
                
                this.setState({
                    credentialPics: picDatas,
                    otherPics:otherPics,
                    isLoadData:true
                })
                
            })
            .catch((error) => {

            });
    }

 

}

const styles = StyleSheet.create({
    container: {
        width: screenW,
        height: '100%',
        flexDirection: 'column'
       
    },
    scrollTab: {
        flex: 1
    },

    confrimBtn:{
        backgroundColor:'#FFE000',
        height:46,
        marginLeft:16,
        marginRight:16,
        borderRadius:4,
        justifyContent:'center',
        alignItems:'center',
        marginTop:12,
        marginBottom:12
    },
    btnText:{
        fontSize:15,
        color:'#222222'
    }
    
})